

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>功能演示二 - 上传组件</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../vendors/layui/css/layui.css" media="all">
</head>
<body>
  <div class="layui-fluid">
    <h2>上传主键功能演示
        <span style="color: red;font-size: 14px;">（当前仅.zip/.rar文件, 5M以上的文件比较明显, 进度条值已打印在控制台）</span>
    </h2>
    <br>
    <br>
    <div  id="uploadLoadingDiv">
      <div class="layui-progress" lay-showpercent="true" lay-filter="demo" >
        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
      </div>
    </div>
    <br>

    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">选完文件后不自动上传</div>
          <div class="layui-card-body">
            <div class="layui-upload">
              <button type="button" class="layui-btn layui-btn-normal" id="test-upload-change">选择文件</button>
              <button type="button" class="layui-btn" id="test-upload-change-action">开始上传</button>
            </div>
            <br>
            <br>
            <div>
              说明：该事例仅提供参考，github上面服务无法实用上传，请移到本地静态服务器，测试实用xammp。
            </div>
          </div>
        </div>
      </div>
    </div>
   
   
  </div>
  <script src="../../vendors/layui/layui.js"></script>  
  <script>
  layui.use(['upload','element','layer'], function(){
    var $ = layui.jquery
    ,upload = layui.upload
    ,element = layui.element
    ,layer = layui.layer;
    
    //创建监听函数
    var xhrOnProgress=function(fun) {
        xhrOnProgress.onprogress = fun; //绑定监听
         //使用闭包实现监听绑
        return function() {
          //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
          var xhr = $.ajaxSettings.xhr();
          //判断监听函数是否为函数
          if (typeof xhrOnProgress.onprogress !== 'function')
          return xhr;
          //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
          if (xhrOnProgress.onprogress && xhr.upload) {
                xhr.upload.onprogress = xhrOnProgress.onprogress;
          }
          return xhr;
        }
    };
     
    //选完文件后不自动上传
    upload.render({
      elem: '#test-upload-change'
      ,url: '../../data/up.php'
      ,auto:false
      ,exts: 'zip|rar'
      ,xhr:xhrOnProgress
      ,progress:function(value){//上传进度回调 value进度值
        console.log(value);
        element.progress('demo', value+'%')//设置页面进度条
       }
      ,multiple: true
      // ,allDone: function(obj){ //当文件全部被提交后，才触发
      //   console.log(obj.total); //得到总文件数
      //   console.log(obj.successful); //请求成功的文件数
      //   console.log(obj.aborted); //请求失败的文件数
      // }
      ,bindAction: '#test-upload-change-action'
      ,before: function(input){
      //返回的参数item，即为当前的input DOM对象
        layer.load(); //上传loading
        console.log('文件上传中');
      }
      ,done: function(res){
        console.log(res);
        layer.closeAll();
        layer.msg("上传成功");
      }
    });

  });
  </script>
</body>
</html>
